<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
  <script>eruda.init();</script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body style="background:#fff;">
  <canvas id="canvas" style="width:100%; height:100%; position:fixed;"></canvas>

  <script src="../dist/easy-canvas.min.js"></script>
  <script src="./draw.js"></script>
  <script>
    window.onload = function () {
      main()

    }
    window.onresize = function () {
      main()
    }

    const src = ''
    function Card(h, children) {
      return h('view', {
        styles: {
          padding: 8,
          backgroundColor: '#fff',
          shadowColor: '#ccc',
          shadowBlur: 10,
          borderRadius: 4,
          margin: 5,
          textAlign: 'center'
        }
      }, children)
    }
    easyCanvas.component('card', (opt, children, h) => Card(h, children))

    function Title(h, level, title) {
      return h('view', {
        styles: {
          padding: 10,
          fontSize: 30 - level * 2,
          borderBottomWidth: 0.5,
          borderColor: '#f1f1f1',
          fontWeight: 800,
          marginBottom: 8
        }
      }, [h('text', {
        styles: {

        }
      }, title)])
    }
    [1, 2, 3, 4, 5, 6].forEach(level => {
      easyCanvas.component(`h${level}`, (opt, children, h) => Title(h, level, children))
    })
    function main() {
      const canvas = document.querySelector('#canvas')

      const ctx = canvas.getContext('2d')
      const dpr = window.devicePixelRatio
      const w = window.innerWidth
      const h = window.innerHeight
      canvas.width = w * dpr
      canvas.height = h * dpr
      ctx.scale(dpr, dpr)
      layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h, debug: false })

      const node = easyCanvas.createElement((h) => {
        let list = []
        // for (let i = 0; i < 100; i++) {
        //   list.push(drawListItem(h))
        // }
        return h('scroll-view', {
          styles: {
            backgroundColor: '#fff', height: window.innerHeight
          },
          attrs: {
            renderOnDemand: true
          }
        },
          [
            drawTicket(h),
            drawListItem(h),
            // ...list,
            h('view', {
              styles: {
                backgroundColor: '#ccc'
              }
            }, [
              h('view', {
                styles: {
                  width: 100,
                  height: 100,
                  backgroundColor: '#fff',
                  borderColor: '#333',
                  borderWidth: 2,
                  padding: 10,
                  margin: 10,
                }
              }, [h('view', {
                styles: {
                  width: '100%',
                  backgroundColor: '#f00',
                  color: '#333',
                  height: '100%'
                }
              }, '盒模型border-box')])
            ])
          ]
        )
      })
      console.log(node)
      node.mount(layer)
      layer.animate()
    }

    // 注册全局组件
    canvas.ontouchstart = ontouchstart
    canvas.ontouchmove = ontouchmove
    canvas.ontouchend = ontouchend
    canvas.onmousedown = ontouchstart
    canvas.onmousemove = ontouchmove
    canvas.onmouseup = ontouchend
    canvas.onmousewheel = onmousewheel

  </script>
</body>

</html>